<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-bar desc="icon" title="描述信息">
                <template slot="right">
                    <uxt-switch
                        size="sm"
                        @change="handleChange($event, 'desc', '描述信息')"
                        radius
                    ></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar desc="arrow" title="箭头">
                <template slot="right">
                    <uxt-switch v-model="arrow" size="sm" radius></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar desc="icon" title="图标">
                <template slot="right">
                    <uxt-switch
                        size="sm"
                        @change="
                            handleChange($event, 'icon', {
                                type: 'weixin',
                                color: 'green'
                            })
                        "
                        radius
                    ></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar desc="url" title="页面跳转">
                <template slot="right">
                    <uxt-switch
                        size="sm"
                        @change="handleChange($event, 'url', '/')"
                        radius
                    ></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="插槽" desc="left | right">
                <template slot="right">
                    <uxt-checkbox v-model="leftSlot" label="左插槽" size="sm"></uxt-checkbox>
                    <uxt-checkbox
                        classes="margin-left-sm"
                        v-model="rightSlot"
                        label="右插槽"
                        size="sm"
                    ></uxt-checkbox>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="背景"
                desc="bg-color=xx/颜色值"
                v-model="bgColor"
                light
                gradual
            ></uxt-color-selector-bar>
            <uxt-bar desc="box" title="盒模式">
                <template slot="right">
                    <uxt-switch size="sm" v-model="box" radius></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="圆角" desc="radius | round,盒模式下有效">
                <template slot="right">
                    <uxt-radio-group v-model="radius" size="sm" type="btn">
                        <uxt-radio label="无" value=""></uxt-radio>
                        <uxt-radio classes="margin-lr-sm" label="小圆角" value="radius"></uxt-radio>
                        <uxt-radio
                            classes="margin-right-sm"
                            label="大圆角"
                            value="round"
                        ></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-bar desc="focus" title="聚焦状态">
                <template slot="right">
                    <uxt-switch size="sm" v-model="focus" radius></uxt-switch>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group classes="padding-bottom-sm" title="展示">
            <uxt-bar
                :desc="desc"
                title="标题"
                content="内容"
                :arrow="arrow"
                :icon="icon"
                :url="url"
                :bg-color="bgColor"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
                :focus="focus"
                data-a="通过data-协带的数据"
                @click="handleEvent('click', $event)"
            >
                <template slot="left">
                    <uxt-tag v-if="leftSlot" bg-color="theme" size="sm" radius>left slot</uxt-tag>
                </template>
                <template slot="right">
                    <uxt-tag v-if="rightSlot" bg-color="theme" size="sm" radius>right slot</uxt-tag>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group classes="margin-top-sm" title="通栏组">
            <template slot="left">
                <uxt-tag v-if="leftSlot" bg-color="theme" size="sm" radius>left slot</uxt-tag>
            </template>
            <template slot="right">
                <uxt-tag v-if="rightSlot" bg-color="theme" size="sm" radius>right slot</uxt-tag>
            </template>
            <uxt-bar desc="描述信息1" title="通栏1" content="内容1"></uxt-bar>
            <uxt-bar desc="描述信息2" title="通栏2" content="内容2"></uxt-bar>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtTag from '@xtcoder/uxt/components/uxt-tag.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtCheckbox from '@xtcoder/uxt/components/uxt-checkbox.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtTag,
        uxtColorSelectorBar,
        uxtCheckbox,
        uxtSwitch,
        uxtRadio,
        uxtRadioGroup
    },
    data() {
        return {
            title: '单元格',
            bgColor: 'white',
            desc: '',
            arrow: false,
            icon: '',
            url: '',
            leftSlot: false,
            rightSlot: false,
            box: false,
            radius: '',
            focus: false,
            events: ''
        }
    },
    methods: {
        handleChange(check, field, value) {
            if (check) {
                this[field] = value
            } else {
                this[field] = ''
            }
        },
        handleEvent(type, e) {
            this.events += `@${type}${e !== undefined ? `(${JSON.stringify(e)})` : ''}<br />`
        }
    }
}
</script>

<style lang="scss" scoped></style>
